import { css } from '@emotion/css';
import { useState } from 'react';

import { Drawer } from '@grafana/ui';

interface Props {
  title?: string;
  url?: string;
  onClose: () => void;
}

export const CustomRightModal = ({
  title,
  url,
  onClose,
}: Props) => {
  const [isLoading, setIsLoading] = useState(true);

  const handleLoad = () => {
    setIsLoading(false);
  };

  return (
    <Drawer
      title={title}
      onClose={onClose}
    >
      {isLoading && <div className={loadingStyles}>加载中...</div>}
      <iframe className={containerStyles} src={url} title="custominspLink" frameBorder="0" onLoad={handleLoad} />
    </Drawer>
  );
};

const containerStyles = css`
  width: 100%;
  height: 100%;
  overflow-y: scroll;
`;

const loadingStyles = css`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #F4F5F5;

`;
